<script lang="ts">
import { defineComponent } from 'vue'

import { getCrier } from '../api/yuan'
import { onMounted, ref } from 'vue'
import { useRoute, useRouter } from 'vue-router'

export default defineComponent({
  components: {},

  setup() {
    const route = useRoute()

    var crier: any = ref<Array<any>>([])
    const getCrierFun = () => {
      getCrier(route.query.goods_id).then((data: any) => {
        console.log(data)
        crier.value = data.data.list
      })
    }

    onMounted(() => {
      getCrierFun()
    })

    let router: any = useRouter()
    return {
      crier
    }
  }
})
</script>

<template>
  <div class="back">
    <div class="new">
      <div class="new-l" @click="$router.back()">
        <span class="iconfont icon-zuojian"></span>
      </div>

      <div class="font">商品评价</div>
      <div class="leftl">
        <div class="tle"><span class="iconfont icon-sangedian"></span></div>
      </div>
    </div>
    <div class="que">
      <div class="lis">全部</div>
    </div>

    <!-- 客户 -->
    <div class="side" v-for="item in crier" :key="item.goods_id">
      <div class="noen">
        <div class="imgs">
          <!-- <img src="https://upload-bbs.miyoushe.com/upload/2023/01/23/e87259fa93bf9575777bcfdd1276fa32_8494250461442468419.png" alt=""> -->
          <img :src="item.review.user_info.avatar_url" alt="" />
        </div>
        <div class="fontl">
          <!-- 我*****啊 -->
          {{ item.review.user_info.nickname }}
          <div class="ring">6月16日</div>
        </div>
      </div>
      <div class="flex">
        <div class="colo">已购：</div>
        <div class="colo">
          <!-- 萧 -->
          {{ item.goods.sale_attr_val }}
        </div>
      </div>

      <div class="text-gray">
        <!-- 之前活动买200块钱东西没送凌华徽章说没有了选别的东西还有凌华徽章 -->
        {{ item.review.text }}
      </div>

      <div class="phto">
        <!-- <img src="https://uploadstatic.mihoyo.com/mall/2023/06/15/334815950/e18fcadc46781b618e55cd81a8c1ef5f_4943233815997594554.jpg?x-oss-process=image/resize,m_fill,w_456,h_456,limit_1/format,webp" alt=""> -->
        <img :src="item.review.images" alt="" />
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.back {
  width: 100%;
  height: 100%;
  background-color: #f3f3f4;
}

.new {
  height: 44px;
  width: 100%;
  background-color: #ffffff;
  display: flex;
  justify-content: space-between;
  //   border-bottom: 2px solid #fbfbfb;
}
.new-l {
  width: 10%;
  line-height: 44px;
  margin-left: 10px;
}
.font {
  width: 70%;
  /* background-color: orange; */
  text-align: center;
  line-height: 45px;
  font-size: 15px;
}
.leftl {
  height: 32px;
  background-color: #ffffff;
  border: 1px solid #f6f6f6;
  width: 15%;
  margin-right: 10px;
  margin-left: 5px;
  margin-top: 6px;
  border-radius: 20px;
  margin-right: 5px;
}
.leftl .iconfont {
  padding-left: 2px;
}

.leftl .tle {
  height: 22px;
  width: 22px;
  margin: 0 auto;
  /* background-color: beige; */
  padding-top: 8px;
}
.que {
  height: 50px;
  background-color: #ffffff;
}
.lis {
  margin: 0 10px;
  line-height: 50px;
}
.side {
  // height: 200px;
  background-color: #ffffff;
  padding-bottom: 13px;
  margin-bottom: 10px;
}
.noen {
  margin: 0 10px;
  height: 45px;
  // background-color: orange;
  padding-top: 10px;
  display: flex;
}
.imgs {
  // width: 119px;
  height: 45px;
  // background-color: blueviolet;
  display: flex;
}
.imgs img {
  display: flex;
  width: 100%;
  border-radius: 50%;
}
.fontl {
  padding-left: 7px;
  margin-top: 5px;
}
.ring {
  margin-top: 5px;

  color: #b3b3bb;
}
.flex {
  height: 27px;
  display: flex;
  padding-top: 10px;
  margin: 0 10px;
}
.colo {
  color: #b3b3bb;
}
.text-gray {
  margin: 0 10px;
}
.phto {
  margin: 0 10px;
  margin-top: 10px;
  width: 187px;
  // height: 250px;
  // background-color: orange;
}
.phto img {
  width: 100%;
  border-radius: 7px;
}
</style>
